<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_RESOURCE_AUTH'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #resourceForm="ngForm">
            <clr-checkbox-container *ngIf="resourceType==='HOST'">
                <label>{{'APP_HOST'|translate}}</label>
                <clr-checkbox-wrapper *ngFor="let resource of resources">
                    <input type="checkbox" clrCheckbox name="host" [(ngModel)]="resource.checked"/>
                    <label>{{resource.data['name']}}</label>
                </clr-checkbox-wrapper>
            </clr-checkbox-container>
            <clr-checkbox-container *ngIf="resourceType==='PLAN'">
                <label>{{'APP_PLAN'|translate}}</label>
                <clr-checkbox-wrapper *ngFor="let resource of resources">
                    <input type="checkbox" clrCheckbox name="options" [(ngModel)]="resource.checked"/>
                    <label>{{resource.data['name']}}</label>
                </clr-checkbox-wrapper>
            </clr-checkbox-container>
            <clr-checkbox-container *ngIf="resourceType==='BACKUP_ACCOUNT'">
                <label>{{'APP_BACKUP_ACCOUNT'|translate}}</label>
                <clr-checkbox-wrapper *ngFor="let resource of resources">
                    <input type="checkbox" clrCheckbox name="backup_account" [(ngModel)]="resource.checked"/>
                    <label>{{resource.data['name']}}</label>
                </clr-checkbox-wrapper>
            </clr-checkbox-container>
        </form>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="resourceForm.invalid">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>
